<!DOCTYPE html>
<html lang="zxx">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="icon" href="images/favicon.png">
	<title>Runface - 动态精准护肤，给你的皮肤新的体验</title>

    <!--<link rel="stylesheet" href="css/bootstrap.css">-->
    <link rel="stylesheet" href="css/mdui.css">

	<link rel="stylesheet" href="css/materialize.css">
	<link rel="stylesheet" href="css/loaders.css">
	<link rel="stylesheet" href="css/lightbox.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">
	<link rel="stylesheet" href="css/style.css">

</head>
<body>

	<!-- preloader -->
	<div class="preloader">
		<div class="spinner"></div>
	</div>
	<!-- end preloader -->
	
	<!-- navbar -->
	<div class="navbar navbar-home">
		<div class="container">
			<div class="row">
				<div class="col s3">
					<div class="content-left">
						<a href="#slide-out" data-activates="slide-out" class="sidebar"><i class="fas fa-bars"></i></a>
					</div>
				</div>
				<div class="col s6">
					<div class="content-center">
						<a href="index.html"><h1>Runface</h1></a>
					</div>
				</div>
				<div class="col s3">
					<div class="content-right">
						<div class="content-search">
							<a href="#slide-out-right" data-activates="slide-out-right" class="sidebar-right-search">
								<i class="fas fa-search"></i>
							</a>
						</div>
						<div class="content-cart">
							<a href="#slide-out-cart" data-activates="slide-out-cart" class="sidebar-right-cart">
	                            <i class="fas fa-shopping-cart"><sup>3</sup></i>
	                        </a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end navbar -->

	<!-- sidebar left -->
	<div class="sidebar-panel">
		<ul id="slide-out" class="collapsible side-nav">
			<li class="list-top">
                <div class="user-view">
                    <div class="image">
                    	<img src="images/logo.png" alt="">
                    </div>
                    <h3>Runface</h3>
                    <span>您尚未登录，请登录</span>
                </div>
            </li>
			<li><a href="index.html"><i class="mdui-icon material-icons">home</i>主页</a></li>
			<li><a href="services.html">美容服务</a></li>
			<li><a href="booking.html">预约</a></li>
			<li><a href="coming-soon.html">预约新版本</a></li>
			<li>
	         	<div class="collapsible-header">
	         		发现<span><i class="fas fa-angle-right right"></i></span>
	         	</div>
	            <div class="collapsible-body">
	              <ul>
	                <li><a href="blog.html">热门点评</a></li>
	                <li><a href="blog-single.html">护肤基础</a></li>
	              </ul>
	            </div>
			</li>
			<li>
	         	<div class="collapsible-header">
	         		购物商城页面<span><i class="fas fa-angle-right"></i></span>
	         	</div>
	            <div class="collapsible-body">
	              <ul>
	                <li><a href="product.html">产品</a></li>
	                <li><a href="product-details.html">产品明细</a></li>
	                <li><a href="cart.html">购物车</a></li>
	                <li><a href="checkout.html">结算</a></li>
	              </ul>
	            </div>
			</li>
			<li>
	         	<div class="collapsible-header">
	         		页面<span><i class="fas fa-angle-right right"></i></span>
	         	</div>
	            <div class="collapsible-body">
	              <ul>
	              	<li><a href="about.html">关于我们</a></li>
	              	<li><a href="services.html">服务</a></li>
	                <li><a href="gallery.html">精彩瞬间</a></li>
	                <li><a href="calendar.html">日历</a></li>
	                <li><a href="pricing-table.html">价格表</a></li>
	                <li><a href="page-not-found.html">404页面</a></li>
	              	<li><a href="contact.html">联系我们</a></li>
	                <li><a href="login.html">登录</a></li>
					<li><a href="register.html">注册</a></li>
	                <li><a href="team.html">团队</a></li>
	                <li><a href="testimonial.html">证书</a></li>
	              </ul>
	            </div>
			</li>
			<li><a href="contact.html">联系我们</a></li>
			<li><a href="login.html">登录</a></li>
			<li><a href="register.html">注册</a></li>
			<li><a href="index.html">退出登录</a></li>
		</ul>
	</div>
	<!-- end sidebar left -->
	
	<!-- sidebar search -->
	<div class="sidebar-panel sidebar-search">
		<ul id="slide-out-right" class="collapsible side-nav">
			<li>
				<div class="form">
					<input type="search"><button class="button"><i class="fas fa-search"></i></button>
				</div>
				<div class="clear"></div>
			</li>
			<li><h5>热门搜索</h5></li>
			<li><a href="">敏感</a></li>
			<li><a href="">防晒</a></li>
			<li><a href="">美白</a></li>
			<li><a href="">痘痘</a></li>
			<li><a href="">毛孔</a></li>
			<li><a href="">卸妆</a></li>
			<li><a href="">性价比</a></li>
		</ul>
	</div>
	<!-- end sidebar search -->

	<!-- sidebar cart -->
    <div class="sidebar-panel sidebar-cart">
        <div id="slide-out-cart" class="collapsible side-nav">
            <div class="content">
                <div class="cart-img">
                    <img src="images/product1.png" alt="">
                </div>
                <div class="cart-title">
                    <a href="">Lipstick With Color Variants</a>
                    <h5>$28</h5>
                </div>
                <div class="cart-remove">
                    <a href=""><i class="fas fa-trash-alt"></i></a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="content">
                <div class="cart-img">
                    <img src="images/product2.png" alt="">
                </div>
                <div class="cart-title">
                    <a href="">Soap Natural Ingredients</a>
                    <h5>$11</h5>
                </div>
                <div class="cart-remove">
                    <a href=""><i class="fas fa-trash-alt"></i></a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="content">
                <div class="cart-img">
                    <img src="images/product3.png" alt="">
                </div>
                <div class="cart-title">
                    <a href="">Oil With Real Fruit Aroma</a>
                    <h5>$32</h5>
                </div>
                <div class="cart-remove">
                    <a href=""><i class="fas fa-trash-alt"></i></a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="cart-button">
                <ul>
                    <li>
                        <button class="button">View Cart</button>
                    </li>
                    <li>
                        <button class="button">Checkout</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end sidebar cart -->
	
	<!-- slider -->
    <div class="slide">
    	<div class="slide-show owl-carousel owl-theme">
    		<div class="content">
    			<div class="mask"></div>
    			<img src="images/slider1.jpg" alt="">
    			 <div class="caption">
                    <h2>Welcome to <span>Runface</span></h2>
                    <p>让你皮肤健康，更自然流露</p>
                </div>
    		</div>
    		<div class="content">
    			<div class="mask"></div>
    			<img src="images/slider2.jpg" alt="">
    			 <div class="caption">
                    <h2>萃绿精华</h2>
                    <p>调理敏感，修复细胞</p>
                </div>
    		</div>
    		<div class="content">
    			<div class="mask"></div>
    			<img src="images/slider3.jpg" alt="">
    			 <div class="caption">
                    <h2>绿色天然</h2>
                    <p>增强细胞活力，促进肌肤组织新陈代谢</p>
                </div>
    		</div>
    	</div>
    </div>
    <!-- end slider -->

	<!-- product -->
	<div class="product product-home segments">
		<div class="container">
			<div class="section-title">
				<h3>Product</h3>
			</div>
			<div class="row">
				<div class="col s6">
					<div class="content">
						<a href="product-details.html">
							<img src="images/product1.png" alt="">
							<p>Lipstick With Color Variants</p>
						</a>
						<h5>$28</h5>
					</div>
				</div>
				<div class="col s6">
					<div class="content">
						<a href="product-details.html">
							<img src="images/product2.png" alt="">
							<p>Soap Natural Ingredients</p>
						</a>
						<h5>$11</h5>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col s6">
					<div class="content">
						<a href="product-details.html">
							<img src="images/product3.png" alt="">
							<p>Oil With Real Fruit Aroma</p>
						</a>
						<h5>$32</h5>
					</div>
				</div>
				<div class="col s6">
					<div class="content">
						<a href="product-details.html">
							<img src="images/product4.png" alt="">
							<p>Makeup Brush With Bags</p>
						</a>
						<h5>$18</h5>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end product -->

	<!-- latest news -->
	<div class="latest-news segments">
		<div class="container">
			<div class="section-title">
				<h3>Latest News</h3>
			</div>
			<div class="row">
				<div class="col s5">
					<div class="content-image">
						<img src="images/latest-news1.jpg" alt="">
					</div>
				</div>
				<div class="col s7">
					<div class="content-text">
						
						<a href="blog-single.html"><h5>Beautiful Makeup Brushes | Original</h5></a>
						<p class="date">Feb 05, 2019</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col s5">
					<div class="content-image">
						<img src="images/latest-news2.jpg" alt="">
					</div>
				</div>
				<div class="col s7">
					<div class="content-text">
						<a href="blog-single.html"><h5>Curly Hairstyle With Cream Color</h5></a>
						<p class="date">Feb 11, 2019</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col s5">
					<div class="content-image">
						<img src="images/latest-news3.jpg" alt="">
					</div>
				</div>
				<div class="col s7">
					<div class="content-text">
						<a href="blog-single.html"><h5>The Nails are Beautiful With Color</h5></a>
						<p class="date">March 23, 2019</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end latest news -->

	<!-- appoinment -->
	<div class="appoinment segments bg-second hide-on-small-only">
		<div class="container">
			<div class="content">
				<div class="section-title">
					<h3>服务预约</h3>
				</div>
				<p>Consectetur adipisicing elit. Voluptates ipsam ad alias dolore, ea molestias esse. Similique sequi sint excepturi aspernatur, aliquam est! Dignissimos, consequatur vel ipsam quisquam quos enim!</p>
				<a href="booking.html" class="button">Appoinment</a>
			</div>
		</div>
	</div>
	<!-- end appoinment -->

	<!-- footer -->
	<footer class="hide-on-small-only">
		<div class="container">
			<div class="wrap-logo">
				<h3><img src="images/logo.png" alt="">Runface</h3>
			</div>
			<div class="wrap-info">
				<ul>
					<li>广东工业大学，信息管理与信息系统专业</li>
					<li>粤ICP备18058180号-2</li>
					<li>tendecss@163.com</li>
				</ul>
			</div>
			<div class="wrap-social">
				<ul>
					<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
					<li><a href=""><i class="fab fa-instagram"></i></a></li>
					<li><a href=""><i class="fab fa-google"></i></a></li>
					<li><a href=""><i class="fab fa-youtube"></i></a></li>
				</ul>
			</div>
			<div class="footer-text">
				<p>Copyright © All Right Reserved</p>
			</div>
		</div>
	</footer>
	<!-- end footer -->

    <!--mdui-nav-bottom start-->
	<div class="mdui-bottom-nav-fixed">
		<div class="mdui-bottom-nav ">
			<a href="index.html" class="mdui-ripple mdui-bottom-nav-active">
				<i class="mdui-icon material-icons">home</i>
				<label>主页</label>
			</a>
			<a href="pricing-table.html" class="mdui-ripple">
				<i class="mdui-icon material-icons">format_list_bulleted</i>
				<label>分类</label>
			</a>
			<a href="javascript:;" class="mdui-ripple">
				<i class="mdui-icon material-icons">add_a_photo</i>
				<label>测一测</label>
			</a>
			<a href="blog.html" class="mdui-ripple">
				<i class="mdui-icon material-icons">bubble_chart</i>
				<label>定制</label>
			</a>
			<a href="javascript:;" class="mdui-ripple">
				<i class="mdui-icon material-icons">person_pin_circle</i>
				<label>我的</label>
			</a>
		</div>
	</div>
	<!--mdui-nav-bottom end-->
	<script src="js/jquery.min.js"></script>
	<script src="js/materialize.js"></script>
	<script src="js/owl.carousel.min.js"></script>
	<script src="js/main.js"></script>
	<script src="js/mdui.js"></script>
	<!--<script src="js/bootstrap.js"></script>-->

</body>
</html>